<template>
  <div>
    <el-container>
      <!-- 侧边栏-->
      <!--100vh相当于整个页面的高度 background-color:  #001529 一级菜单颜色-->
      <!-- :width="asideWidth" 绑定-->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color:  #001529">
        <!-- align-items: center; 上下居中  justify-content: center  左右居中 -->
        <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
          <transition name="el-fade-in-linear">
            <img src="@/assets/images/h_logo.png" alt="" style="width: 100%; height: 100%" v-show="isCollapse == false">
          </transition>
          <transition name="el-fade-in-linear">
            <img src="@/assets/images/f_logo.png" alt="" style="width: 100%; height: 100%" v-show="isCollapse == true">
          </transition>
        </div>

        <!--$route.path 是指当前浏览器访问的路由  default-active  高亮-->
        <!--router 开启路由跳转-->
        <!--:collapse-transition="false" 动画不生效-->
        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529"
                 text-color="rgba(255,255,255,0.65)" active-text-color="#fff"
                 style="border: none; margin-top: 10px" :default-active="$route.path">
          <el-menu-item index="/">
            <i class="el-icon-house"/>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/1">
            <i class="el-icon-user"/>
            <span slot="title">用户信息管理</span>
          </el-menu-item>
          <el-menu-item index="/2">
            <i class="el-icon-setting"/>
            <span slot="title">充电设备管理</span>
          </el-menu-item>
          <el-menu-item index="/2">
            <i class="el-icon-s-order"/>
            <span slot="title">用户租借归还</span>
          </el-menu-item>
          <el-menu-item index="/2">
            <i class="el-icon-s-promotion"/>
            <span slot="title">充电信息管理</span>
          </el-menu-item>
          <el-menu-item index="/2">
            <i class="el-icon-location-outline"/>
            <span slot="title">设备地址</span>
          </el-menu-item>
          <el-menu-item index="/2">
            <i class="el-icon-mobile-phone"/>
            <span slot="title">用户订单</span>
          </el-menu-item>
          <el-menu-item index="/2">
            <i class="el-icon-lollipop"/>
            <span slot="title">活动公告</span>
          </el-menu-item>
          <el-menu-item index="/2">
            <i class="el-icon-watch"/>
            <span slot="title">日志记录</span>
          </el-menu-item>

          <!-- 二级菜单-->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item>用户信息</el-menu-item>
            <el-menu-item>系统管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>


      <el-container>
        <!--头部区域-->
        <el-header>
          <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
            <i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; justify-content: center">
                <!--                <el-avatar :size="size" :src="circleUrl" style="margin: 0 5px"></el-avatar>-->
                <el-avatar :size="32" :src="circleUrl" style="margin: 0 5px"></el-avatar>
                <!--                <img src="@/assets/images/f_logo.png" style="width: 40px; height: 40px;">-->
                <span>管理员</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
        </el-header>

        <!--        主体区域-->
        <el-main>
          <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
            早安，祝你开心每一天！
          </div>
          <div style="display: flex">
            <el-card style="width: 50%;margin-right: 10px">
              <div slot="header" class="clearfix">
                <span>My Angel</span>
              </div>
              <div>
                想见你只想见你 未来过去我只想见你
                <div style="margin-top: 20px">
                  <div style="margin: 10px 0"><strong>主题色</strong></div>
                  <el-button type="primary">按钮</el-button>
                  <el-button type="success">按钮</el-button>
                  <el-button type="warning">按钮</el-button>
                  <el-button type="danger">按钮</el-button>
                  <el-button type="info">按钮</el-button>
                </div>
              </div>
            </el-card>
            <el-card style="width: 50%">
              <div slot="header" class="clearfix">
                <span>表格数据渲染</span>
              </div>
              <div>
                <el-table :data="users">
                  <!--prop="id" 属性-->
                  <el-table-column label="ID" prop="id"></el-table-column>
                  <el-table-column label="用户名" prop="username"></el-table-column>
                  <el-table-column label="密码" prop="password"></el-table-column>
                  <el-table-column label="姓名" prop="name"></el-table-column>
                  <el-table-column label="地址" prop="address"></el-table-column>
                  <el-table-column label="头像">
                    <template v-slot="scope">
                      <el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 50px; height: 50px;"/>
                      <div><el-button @click="preview(scope.row.avatar)">预览</el-button></div>
                    </template>

                  </el-table-column>

                  <el-table-column label="上传头像">
                  <template v-slot="scope">
                      <el-upload
                          action="http://localhost:8888/file/upload"
                          :headers="{token: user.token}"
                          :show-file-list="false"
                          :on-success="(row, file, fileList2) => handleTableFileUpload(scope.row, file, fileList2)"
                      >
                        <el-button size="mini" type="primary">点击上传</el-button>
                      </el-upload>
                  </template>
                  </el-table-column>

                </el-table>
              </div>
            </el-card>
          </div>

          <div style="display: flex; margin: 10px 0">
            <el-card style="width: 50%; margin-right: 10px">
              <div slot="header" class="clearfix">
                <span>文件上传下载</span>
              </div>
              <div>
                <el-upload
                    action="http://localhost:8888/file/upload"
                    :headers="{token: user.token}"
                    :file-list="fileList"
                    list-type="picture"
                    :on-success="handleFileUpload"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传JPG等文件，且不能超过500kb</div>
                </el-upload>
              </div>

              <div style="margin: 10px 0">
                <el-upload
                    action="http://localhost:8888/file/upload"
                    :headers="{token: user.token}"
                    :on-success="handleMultipleFileUpload"
                    multiple
                >
                  <el-button size="small" type="success">多文件上传</el-button>
                </el-upload>
              </div>
              <div style="margin: 10px 0">
                <el-button size="small" type="danger" @click="showUrls">多文件打印</el-button>
              </div>
            </el-card>
          </div>
        </el-main>

        <!--底部区域-->
        <!--        <el-footer>底部区域</el-footer>-->
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 引用本地图片
import circleUrl from "@/assets/images/f_logo.png";
import axios from "axios";
import request from "@/utils/request";
import router from "@/router";

export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: false,  // 不收缩
      asideWidth: "200px",  // 展开状态默认200x
      collapseIcon: 'el-icon-s-fold', // 收缩图标的绑定
      circleUrl: circleUrl,
      users: [],
      user: JSON.parse(localStorage.getItem('power-user') || '{}'),
      fileList: [],
      fileList2: [],
      urls: [],
    };
  },
  mounted(){  // 页面加载后触发
    // .then 下一步
    // axios.get('http://localhost:8888/user/selectAll').then(res => {
      // console.log(res)  // 后台返回的数据
      // this.users = res.data.data;  // 把收到的数据传输给表格绑定的数组
      // res.data = { // 数据格式
      //   code: '200',
      //   msg: '请求成功',
      //   data: {
      //
      //   }
      // }
      request.get('/user/selectAll').then(res => {
        this.users = res.data; // 把收到的数据传输给表格绑定的数组
      })
    // })
  },
  methods: {
    preview(url){
      window.open(url)  // 默认是预览的
    },
    showUrls(){
      console.log(this.urls)
    },
    // 多文件上传
    handleMultipleFileUpload(response, file, fileList){
      // console.log(row, file, fileList2)
      this.urls = fileList.map(v => v.response?.data)
    },
    // 单文件上传
    handleTableFileUpload(row, file, fileList2){
      // console.log(row, file, fileList2)
      row.avatar = file.response.data
      // 触发更新/修改  传输的对象 row也就是当前行的数据
      request.post('/user/update',row).then(res => {
        if (res.code === '200'){
          this.$message.success("上传成功")
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    handleFileUpload(response, file, fileList){
      console.log(response,file,fileList)
      console.log(this.user)
      this.fileList = fileList
    },
    logout(){
      localStorage.removeItem("power-user")  // 清除当前用户存储的数据
      this.$router.push('/login')
    },
    handleFull() {
      // 实现全屏
      document.documentElement.requestFullscreen();
    },
    handleCollapse() {
      // 取反
      this.isCollapse = !this.isCollapse
      // 通过true或false来得出要赋值
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    }
  }
}
</script>


<style>
/*二级菜单里的背景颜色*/
.el-menu--inline {
  background-color: #000c17 !important;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important; /*文字偏移*/
}

/*鼠标经过时改变字体颜色*/
.el-menu-item:hover {
  color: #fff !important;
}

.el-submenu__title:hover *, .el-submenu__title:hover {
  color: #fff !important;
}

/*选中的菜单背景*/
.el-menu-item.is-active {
  /*margin: 4px !important; !*边距*!*/
  background-color: #1890ff !important;
  border-radius: 5px !important; /*圆角*/
  width: calc(100% - 8px); /*相当于上面的200px - 8px */
  margin-left: 4px; /*左偏移*/
}

/* 控制图标的偏移 */
.el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
  margin-left: -4px;
}

/*控制格子大小*/
.el-menu-item {
  height: 50px !important;
  line-height: 50px !important;
}

.el-submenu__title {
  height: 50px !important;
  line-height: 50px !important;
}

/*控制二级菜单的统一*/
.el-submenu .el-menu-item {
  min-width: 0 !important; /*最小宽度*/
}

.el-submenu .el-menu-item.is-active {
  padding-left: 45px !important;
}

/*收缩动画*/
.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
}
</style>